<template>
  <div>
    <div class="header-container">
      <div class="header-intro">
        <i class="icon icon-xianwan" @click="showSidebar()"></i>
        <span class="intro-text">仙玩·云手机</span>
        <span class="intro-version">v0.01</span>
      </div>
      <ul class="nav nav-tabs header-nav">
        <li class="tabs-item" @click="toCloudPage('cloud')">
          <a class="tabs-a" v-bind:class="{'select':currentPage =='cloud'}" data-toggle="tab">云机预览</a>
        </li>
        <li class="tabs-item" @click="toCloudPage('upload')">
          <a class="tabs-a" v-bind:class="{'select':currentPage =='upload'}" data-toggle="tab">上传应用</a>
        </li>
        <li class="tabs-item" @click="toCloudPage('upfile')">
          <a class="tabs-a" v-bind:class="{'select':currentPage =='upfile'}" data-toggle="tab">上传文件</a>
        </li>
        <li class="tabs-item" @click="toCloudPage('service')">
          <a class="tabs-a" v-bind:class="{'select':currentPage =='service'}" data-toggle="tab">配套服务</a>
        </li>
      </ul>

      <div class="header-control">
        <div class="header-avatar">
          <img class="avatar" :src="avatar">
          <div class="avatar-panel">
            <div class="avatar-item" @click="setPersonal()">修改资料</div>
            <div class="avatar-item" @click="logout()">退出登录</div>
          </div>
        </div>
        <div class="header-phone" @click="showPhone()">
          <i class="icon icon-phone"></i>
          <span class="icon-title">小程序</span>
          <div class="phone-panel" v-if="isShowPhone">
            <div class="panel-title">微信小程序入口</div>
            <div class="panel-body"></div>
          </div>
        </div>
        <div class="header-help">
          <i class="icon icon-question"></i>
          <span class="icon-title">帮助</span>
        </div>
        <div class="header-message" @click="showMessage()">
          <i class="icon icon-message"></i>
          <span class="message-count">5</span>
          <div class="message-panel" v-if="isShowMessage">
            <div class="message-title">
              你有
              <strong>1</strong>条未读通知
              <span class="btn-read">全部已读</span>
            </div>
            <div class="message-body">
              <div class="message-item">
                <i class="icon icon-news"></i>
                <div class="item-body">
                  <span class="title text-inline">ssssssssssssssssssssssssss</span>
                  <span class="time text-inline">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                </div>
              </div>
              <div class="message-item">
                <i class="icon icon-news"></i>
                <div class="item-body">
                  <span class="title text-inline">yyyyyyyyyy</span>
                  <span class="time text-inline">hnhnhnhn</span>
                </div>
              </div>
            </div>
            <div class="message-footer">
              <span class="message-all">查看所有通知</span>
            </div>
          </div>
        </div>
        <a class="btn-shopping" @click="order()">
          <i class="icon icon-shopping"></i>
          订购/续费
        </a>
        <a class="btn-recharge">充值</a>
      </div>
    </div>
    <SetPersonalDialog v-if="setPersonalDialog"></SetPersonalDialog>
    <OrderDialog v-if="orderDialog"></OrderDialog>
  </div>
</template>

<script>
import SetPersonalDialog from "./dialog/SetPersonalDialog";
import OrderDialog from "./dialog/OrderDialog";
export default {
  components: {
    SetPersonalDialog,
    OrderDialog
  },
  data() {
    return {
      isShowPhone: false,
      isShowMessage: false,
      isShowSidebar: true, //用于控制侧边栏显示/隐藏
      currentPage: "cloud",
      avatar: require("../../static/img/avatar.jpg")
    };
  },
  created() {
    this.currentPage =
      sessionStorage.getItem("currentPage") == null
        ? "cloud"
        : sessionStorage.getItem("currentPage");
  },
  methods: {
    //订购/续费
    order() {
      this.$store.commit("setDialogStatus", {
        dialog: "orderDialog",
        isBoolean: true
      });
    },
    //修改个人资料
    setPersonal() {
      this.$store.commit("setDialogStatus", {
        dialog: "setPersonalDialog",
        isBoolean: true
      });
    },
    //显示/隐藏个人信息
    showMessage() {
      this.isShowMessage = !this.isShowMessage;
    },
    //显示/隐藏小程序入口
    showPhone() {
      this.isShowPhone = !this.isShowPhone;
      this.$swal("Hello Vue world!!!");
    },
    //退出登录
    logout() {
      this.$router.push({ path: "/" });
    },
    //路由跳转
    toCloudPage(page) {
      this.currentPage = page;
      sessionStorage.setItem("currentPage", page);
      this.$router.push({ path: "/pages/" + page });
    },
    //显示/隐藏侧边栏
    showSidebar() {
      this.isShowSidebar = !this.isShowSidebar;
      if (this.isShowSidebar) {
        $(".app-sidebar").css("width", "280px");
        $(".app-content")
          .css("left", "280px")
          .css("width", "calc(100% - 280px)");
      } else {
        $(".app-sidebar").css("width", "0");
        $(".app-content")
          .css("left", "0")
          .css("width", "100%");
      }
    }
  },
  computed: {
    setPersonalDialog() {
      return this.$store.state.setPersonalDialog;
    },
    orderDialog() {
      return this.$store.state.orderDialog;
    }
  },
  destroyed() {
    //清除sessionStorage
    sessionStorage.removeItem("currentPage");
  }
};
</script>

<style lang="scss">
$primary: #007bff;
$primary-shadow: rgba(82, 168, 236, 0.6);
$primary-hover: rgba(0, 123, 255, 0.5);
$white-light: #f5f5f5;
.header-container {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 1100px;
  height: 60px;
  line-height: 60px;
}
.header-intro {
  position: relative;
  width: 280px;
  height: 60px;
  display: flex;
  line-height: 60px;
  .icon-xianwan {
    cursor: pointer;
    margin-left: 30px;
    height: 60px;
    width: 40px;
    &:before {
      content: "\e6f6";
      color: white;
      font-size: 40px;
    }
  }
  .intro-text {
    height: 60px;
    line-height: 65px;
    color: white;
    font-family: cursive;
    font-size: 20px;
    font-weight: bold;
  }
  .intro-version {
    font-size: 12px;
    line-height: 65px;
    margin-left: 15px;
    color: white;
  }
}
.header-nav {
  position: relative;
  .tabs-item {
    cursor: pointer;
    padding: 0 5px;
    color: white;
    text-align: center;
    .tabs-a {
      display: inline-block;
      height: 60px;
      &:hover {
        border-bottom: 5px solid white;
      }
      &.select {
        border-bottom: 5px solid white;
      }
    }
  }
}
.header-control {
  position: absolute;
  right: 0;
  min-width: 500px;
}
.btn-recharge {
  position: relative;
  float: right;
  margin-left: 10px;
  margin-top: 15px;
  cursor: pointer;
  height: 30px;
  line-height: 26px;
  padding: 0 10px;
  color: white !important;
  border: 1px solid white;
  border-radius: 3px;
  &:hover {
    color: white !important;
    background-color: $primary;
  }
}
.btn-shopping {
  position: relative;
  float: right;
  cursor: pointer;
  width: 115px;
  margin-top: 15px;
  margin-left: 10px;
  line-height: 26px;
  padding: 0 5px;
  height: 30px;
  color: white !important;
  border: 1px solid white;
  border-radius: 3px;
  &:hover {
    color: white !important;
    background-color: $primary;
  }
  .icon-shopping {
    &:before {
      content: "\e6b8";
      font-size: 20px;
    }
  }
}
.header-message {
  position: relative;
  float: right;
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 50px;
  margin-left: 10px;
  color: white;
  &:hover {
    background-color: $primary-hover;
    // .message-panel {
    //   visibility: visible;
    //   opacity: 1;
    //   z-index: 999;
    // }
  }
  .icon-message {
    &:before {
      content: "\e69a";
      font-size: 30px;
    }
  }
  .message-count {
    position: absolute;
    top: 7px;
    right: 5px;
    width: 23px;
    height: 18px;
    line-height: 18px;
    color: white;
    background-color: red;
    border-radius: 50%;
    font-size: 12px;
  }
  .message-panel {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    width: 200px;
    top: 60px;
    left: -75px;
    // visibility: hidden;
    // z-index: -999;
    // opacity: 0;
    color: #000000;
    // -webkit-transition: opacity 0.5s;
    // transition: opacity 0.5s;
    background-color: white;
    box-shadow: 0px 2px 12px 1px #bcbcbc;
    .message-title {
      background-color: $white-light;
      text-align: center;
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      .btn-read {
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        padding: 3px;
        font-size: 12px;
        box-sizing: border-box;
        border-radius: 3px;
        color: $primary;
        border: 1px solid $primary-shadow;
        &:hover {
          color: white;
          background-color: $primary-shadow;
        }
      }
    }
    .message-footer {
      background-color: $white-light;
      text-align: center;
      height: 40px;
      line-height: 40px;
      .message-all {
        cursor: pointer;
        color: #3a5a7a;
        &:hover {
          color: $primary;
        }
      }
    }
    .message-body {
      text-align: left;
      .message-item {
        cursor: pointer;
        display: flex;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        &:hover {
          background-color: $primary-shadow;
        }
        .icon-news {
          width: 40px;
          &:before {
            content: "\e623";
            font-size: 30px;
          }
        }
        .item-body {
          display: flex;
          flex-direction: column;
          width: 140px;
          .title {
            height: 25px;
            line-height: 30px;
            font-size: 16px;
          }
          .time {
            height: 25px;
            line-height: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.header-help {
  position: relative;
  float: right;
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 80px;
  color: white;
  &:hover {
    background-color: $primary-hover;
  }
  .icon-question {
    &:before {
      content: "\e613";
      font-size: 24px;
    }
  }
}
.header-phone {
  position: relative;
  float: right;
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 80px;
  color: white;
  &:hover {
    background-color: $primary-hover;
    // .phone-panel {
    //   visibility: visible;
    //   opacity: 1;
    //   z-index: 999;
    // }
  }
  .icon-phone {
    &:before {
      content: "\e641";
      font-size: 20px;
    }
  }
  .icon-title {
  }
  .phone-panel {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    width: 150px;
    height: 180px;
    top: 60px;
    left: -35px;
    // visibility: hidden;
    // z-index: -999;
    // opacity: 0;
    // -webkit-transition: opacity 0.5s;
    // transition: opacity 0.5s;
    background-color: white;
    box-shadow: 0px 2px 12px 1px #bcbcbc;
    .panel-title {
      height: 30px;
      line-height: 50px;
      color: #007bff;
    }
    .panel-body {
      height: 150px;
      width: 150px;
      // background: url(../../static/img/avatar.jpg) repeat;
      background-size: cover;
    }
  }
}
.header-avatar {
  position: relative;
  float: right;
  height: 60px;
  width: 70px;
  padding: 5px 10px;
  &:hover {
    background-color: $primary-hover;
    .avatar-panel {
      visibility: visible;
      opacity: 1;
      z-index: 999;
    }
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    vertical-align: unset;
    // background: url(../../static/img/avatar.jpg) repeat;
    background-size: cover;
  }
  .avatar-panel {
    position: absolute;
    box-sizing: border-box;
    padding: 10px 5px;
    text-align: center;
    width: 120px;
    top: 60px;
    right: 0;
    visibility: hidden;
    z-index: -999;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    background-color: white;
    box-shadow: 0px 2px 12px 1px #bcbcbc;
    .avatar-item {
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      text-align: left;
      border-radius: 3px;
      &:hover {
        color: white;
        background-color: $primary-hover;
      }
    }
  }
}
</style>